<template>
	<view class="form-main">
		
		<view class="form-column">
			<view class="form-title">每日业绩表</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" :error-type="['message']">
					<u-form-item label="院区:" label-width="80rpx" prop="deptName" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="yqShow" @click="yqShow = true" placeholder="请选择院区" v-model="form.deptName" />
						</view>
						<u-select v-model="yqShow" mode="single-column" :list="yqList" value-name="id" label-name="name" @confirm="onConfirmType1"></u-select>
					</u-form-item>
					<u-form-item label="日期:" label-width="80rpx" prop="dataDate" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="dateShow" @click="dateShow = true" placeholder="请选择日期" v-model="form.dataDate" />
						</view>
						<u-picker v-model="dateShow" mode="time" @confirm="onConfirmType2"></u-picker>
					</u-form-item>
					<u-form-item label="年目标业绩:" label-width="160rpx" prop="nmb">
						<u-input class="form-input" v-model="form.nmb" type="number" placeholder="选择院区获取" disabled/>
					</u-form-item>
					<u-form-item label="月目标业绩:" label-width="160rpx" prop="ymb">
						<u-input class="form-input" v-model="form.ymb" type="number" placeholder="选择院区获取" disabled/>
					</u-form-item>
					<u-form-item label="手术险业绩:" label-width="160rpx" prop="daySsYj" required>
						<u-input class="form-input" v-model="form.daySsYj" type="number" placeholder="日手术险业绩"/>
					</u-form-item>
					<u-form-item label="手术险件数:" label-width="160rpx" prop="daySsJs" required>
						<u-input class="form-input" v-model="form.daySsJs" type="number" placeholder="日手术险件数"/>
					</u-form-item>
					<u-form-item label="住院险业绩:" label-width="160rpx" prop="dayZyYj">
						<u-input class="form-input" v-model="form.dayZyYj" type="number" placeholder="日住院险业绩"/>
					</u-form-item>
					<u-form-item label="住院险件数:" label-width="160rpx" prop="dayZyJs">
						<u-input class="form-input" v-model="form.dayZyJs" type="number" placeholder="日住院险件数"/>
					</u-form-item>
					<u-form-item label="退保金额:" label-width="130rpx" prop="dayTbJe">
						<u-input class="form-input" v-model="form.dayTbJe" type="number" placeholder="日退保金额"/>
					</u-form-item>
					<u-form-item label="退保件数:" label-width="130rpx" prop="dayTbJs">
						<u-input class="form-input" v-model="form.dayTbJs" type="number" placeholder="日退保件数"/>
					</u-form-item>
					<u-form-item label="手术台次:" label-width="130rpx" prop="daySsTs" required>
						<u-input class="form-input" v-model="form.daySsTs" type="number" placeholder="日手术台次"/>
					</u-form-item>
					<u-form-item label="讲单件数:" label-width="130rpx" prop="dayJdJs" required>
						<u-input class="form-input" v-model="form.dayJdJs" type="number" placeholder="日讲单件数"/>
					</u-form-item>
				</u-form>
			</view>
			<view class="form-title" style="margin: 30rpx 0 20rpx;">
				<view>各科室投保件数</view>
				<view>
					<u-button type="primary" size="mini" ripple @click="popupShow = true">{{ hospitalDept[ksIndex[0]].label }}</u-button>
				</view>
			</view>
			<view class="form-box">
				<u-form :model="formKs" ref="uFormKs" :error-type="['message']">
					<u-form-item v-for="(item, index) in hospitalDeptList" :key="index" v-if="item.checked" :label="item.name+':'" :prop="item.name"
						:label-width="item.name.length <= 2 ? '80rpx' : (((item.name.length - 2) * 25 + 85) + 'rpx')"><!-- required -->
						<u-input class="form-input" v-model="formKs[item.name]" :placeholder="`${item.name}件数`" type="number" border/>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="u-margin-top-30" @click="submitAction">
			<animate-button ref="animeBtn" btn-text="提交"></animate-button>
		</view>
		<u-gap height="100"></u-gap>
		<u-toast ref="uToast"></u-toast>
		<u-popup v-model="popupShow" mode="right" width="50%">
			<view class="form-title" style="display: flex;justify-content: space-between;align-items: center;;padding: 30rpx 20rpx 10rpx;">
				<view style="font-size: 16px;">医院科室</view>
				<view @click="ksShow = true" style="border: 1px solid #000;font-size: 12px;padding: 3px 8px;border-radius: 5px;">{{ hospitalDept[ksIndex[0]].label }}</view>
			</view>
			<view style="margin: 10rpx 35rpx;">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox 
						v-model="item.checked" 
						v-for="(item, index) in hospitalDeptList" :key="index" 
						:name="item.name"
						style="width: 100%;margin: 5rpx 0;"
					>{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-gap height="30"></u-gap>
			<!-- <animate-button ref="animeBtn" btn-text="确认" @click="okHospitalDept"></animate-button> -->
		</u-popup>
		<u-select v-model="ksShow" :list="hospitalDept" title="选择医院科室模版" :default-value="ksIndex" @confirm="ksConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				type: null,
				yqShow: false,
				dateShow: false,
				popupShow: false,
				yqList: [
					// {
					// 	id: 1,
					// 	name: '院区一'
					// },
					// {
					// 	id: 2,
					// 	name: '院区二'
					// }
				],
				form: {
					deptId: '',
					deptName: '',
					dataDate: '',
					nmb: '',
					ymb: '',
					daySsYj: '',
					daySsJs: '',
					dayZyYj: '',
					dayZyJs: '',
					dayTbJe: '',
					dayTbJs: '',
					daySsTs: '',
					dayJdJs: '',
				},
				formKs: {},
				rules: {
					deptName: [
						{
							required: true,
							message: '请选择院区！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					dataDate: [
						{
							required: true,
							message: '请选择日期！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					daySsYj: [
						{
							required: true,
							message: '请输入日手术险业绩！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					daySsJs: [
						{
							required: true,
							message: '请输入日手术险件数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					daySsTs: [
						{
							required: true,
							message: '请输入日手术台次！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
					dayJdJs: [
						{
							required: true,
							message: '请输入日讲单件数！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}
					],
				},
				rulesKs: {},
				hospitalDeptList: [],
				ksShow: false,
				ksIndex: [0],
				checkList: []
			};
		},
		computed: {
			hospitalDept() {
				return this.$store.state.hospitalDept
			}
		},
		methods: {
			getDetail(id) {
				this.$api.yjDetails({
					id
				}).then(res => {
					let d = res.data
					this.id = d.id
					this.form = {
						deptId: d.deptId,
						deptName: d.deptName,
						dataDate: d.dataDate,
						nmb: d.nmb,
						ymb: d.ymb,
						daySsYj: d.daySsYj,
						daySsJs: d.daySsJs,
						dayZyYj: d.dayZyYj,
						dayZyJs: d.dayZyJs,
						dayTbJe: d.dayTbJe,
						dayTbJs: d.dayTbJs,
						daySsTs: d.daySsTs,
						dayJdJs: d.dayJdJs,
					}
					if (d.ksyjss.length != 0) {
						for (let i in d.ksyjss) {
							this.hospitalDeptList.push({
								id: i,
								name: d.ksyjss[i].ksName,
								checked: true,
								num: d.ksyjss[i].js
							});
							this.formKs[d.ksyjss[i].ksName] = d.ksyjss[i].js;
							this.checkList.push(d.ksyjss[i].ksName);
						}
					} else {
						for (let i in this.hospitalDept[0].value) {
							this.hospitalDeptList.push({
								id: i,
								name: this.hospitalDept[0].value[i],
								checked: true,
								num: 0
							});
							this.checkList.push(this.hospitalDept[0].value[i]);
						}
					}
				})
			},
			getDepList() {
				this.$api.deptList({
					current: 1,
					size: 999
				}).then(res => {
					let data = res.data
					for (let i of data.records) {
						this.yqList.push({
							name: i.deptName,
							id: i.deptId,
							extra: [i.nmb, i.ymb]
						})
					}
				})
			},
			onConfirmType1(item) {
				this.form.deptId = item[0].value
				this.form.deptName = item[0].label
				this.form.nmb = item[0].extra[0]
				this.form.ymb = item[0].extra[1]
			},
			onConfirmType2(item) {
				this.form.dataDate = `${item.year}-${item.month}-${item.day}`
			},
			submitAction() {
				if (this.$refs.animeBtn.status != 1) return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uFormKs.validate(validKs => {
							if (validKs) {
								let ksyjs = [], ksyjNames = [];
								for (let i in this.checkList) {
									if (!!this.formKs[this.checkList[i]]) {
										ksyjNames.push(this.checkList[i])
										ksyjs.push(Number(this.formKs[this.checkList[i]]))
									}
								}
								this.$refs.animeBtn.loading()
								let params = this.type == 0 ? { id: 0 } : { id: this.id }
								this.$api.yjAddOrUpdate({
									...this.form,
									...params,
									ksyjs,
									ksyjNames
								}).then(res => {
									this.$refs.animeBtn.success()
									this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
										back: true,
										duration: 1500,
										callback: () => {
											this.$fallback(1, 
												{
													key: 'reset',
												},
											)
										}
									});
								}).catch(() => {
									this.$refs.animeBtn.fail()
									setTimeout(()=> {
										this.$refs.animeBtn.reset()
									}, 3000)
								})
							}
						})
					} else {
						this.$refs.uFormKs.validate()
						return
					}
				});
			},
			checkboxGroupChange(e) {
				this.checkList = e
				// this.rulesKs = {}
				for (let i in e) {
					this.formKs[e[i]] = ''
					// this.rulesKs[e[i]] = [
					// 	{
					// 		required: true,
					// 		message: `请输入${e[i]}件数！`, 
					// 		// 可以单个或者同时写两个触发验证方式 
					// 		trigger: ['change', 'blur'],
					// 	}
					// ]
				}
				// this.$refs.uFormKs.setRules(this.rulesKs);
			},
			ksConfirm(e, index) {
				let res = e[0];
				if (this.ksIndex[0] == res.extra) {
					return 
				} else {
					this.ksIndex[0] = res.extra
				}
				this.formKs = {};
				this.rulesKs = {};
				this.checkList = [];
				this.hospitalDeptList.splice(0, this.hospitalDeptList.length);
				for (let i in res.value) {
					this.hospitalDeptList.push({
						id: i,
						name: res.value[i],
						checked: true,
						num: 0
					});
					this.checkList.push(res.value[i]);
				}
			}
		},
		onLoad() {
			const {
				type,
				id
			} = this.$Route.query;
			this.id = id;
			this.type = type;
			if (type == 1) {
				this.getDetail(id)
			} else {
				this.form.dataDate = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
				for (let i in this.hospitalDept[0].value) {
					this.hospitalDeptList.push({
						id: i,
						name: this.hospitalDept[0].value[i],
						checked: true,
						num: 0
					});
					this.checkList.push(this.hospitalDept[0].value[i]);
				}
			}
			uni.setNavigationBarTitle({
				title: type == 0 ? '每日业绩表上传' : '每日业绩表编辑'
			})
			this.getDepList();
		},
		onReady() {
			if (this.type != 1) {
				this.$refs.uForm.setRules(this.rules);
			}
			// this.$refs.uFormKs.setRules(this.rulesKs);
		}
	}
</script>

<style scoped>
	.select-box{
		width: 100%;
	}
	.form-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.form-box .u-form {
		display: flex;
		flex-wrap: wrap;
	}
	.form-box .u-form-item {
		width: 50%;
		padding: 7px 5px !important;
	}
</style>